import React, { Component } from 'react';
import { Form, Row, Col } from 'antd';
import GetFieldDeorator from './getFieldDecorator';
class CustomFormItem extends Component {
  constructor() {
    super();
  }

  getComponent(component) {
    if (!component.type || !component.type.name) {
      return component;
    }
    switch (component.type.name) {
      case 'Select':
      case 'TreeSelect':
        return React.cloneElement(component, {
          getPopupContainer: () => (this.props.modelId ? document.getElementById(this.props.modelId) : document.body),
          placeholder: this.props.isCompare ? '' : component.props.placeholder || '',
        });
      case 'DatePicker':
      case 'TimePicker':
        return React.cloneElement(component, {
          getCalendarContainer: () =>
            this.props.modelId ? document.getElementById(this.props.modelId) : document.body,
          placeholder: this.props.isCompare ? '' : component.props.placeholder || '',
        });

      default:
        if (this.props.isCompare) {
          return React.cloneElement(component, {
            placeholder: '',
          });
        } else {
          return component;
        }
    }
  }

  render() {
    const { item, colNum } = this.props;
    const { name, label, options, component, children, after } = item;
    const formItemLayout =
      colNum >= 1 && label
        ? {
            labelCol: {
              span: item.labelCol || 6,
            },
            wrapperCol: {
              span: item.wrapperCol || 18,
            },
          }
        : {};
    const attr = {
      ...formItemLayout,
      className: '',
      ...label,
    };

    return (
      <Form.Item {...attr}>
        <Row type='flex' justify='start'>
          <Col span={20}>
            <GetFieldDeorator options={options}>{this.getComponent(component)}</GetFieldDeorator>
            {children &&
              children.map((item) => {
                const { name, options, component } = item;
                return (
                  <span className='mar-l-10' key={name}>
                    <GetFieldDeorator options={options}>{this.getComponent(component)}</GetFieldDeorator>
                  </span>
                );
              })}
          </Col>
          <Col>{after && <span className='mar-l-10'>{after}</span>}</Col>
        </Row>
      </Form.Item>
    );
  }
}
export default CustomFormItem;
